<template>
	<view class="order-list">
		<view class="order-item">
			<!-- 顶部 -->
			<view class="top">
				<view class="title">
					<view class="time"> <text>19:20内</text>&nbsp;送达 </view>
					<view class="price"> ￥ <text>12</text> </view>
				</view>
				<view class="desc">
					已接单，正在赶往商家
				</view>
			</view>
			<!-- 内容区域 -->
			<view class="content">
				<view class="distance">
					<view class="km">
						<view class="km-item"> 12 </view>
						<view class="km-item"> km </view>
					</view>
					<view class="m">
						<view class="m-item"> 12 </view>
						<view class="m-item"> m </view>
					</view>
				</view>
				<view class="shop-user-nav" @tap="goOrderDetails">
					<view class="shop-info">
						<view class="shop-name"> 幸运咖啡顶 </view>
						<view class="address"> 湖南省长沙市岳麓区麓谷信息港38号 </view>
					</view>
					<view class="user-info">
						<view class="user-name"> 兴工国际产业园-3栋1808室 </view>
						<view class="address"> 湖南省长沙市岳麓区麓谷信息港38号 </view>
					</view>
				</view>
				<view class="nav">
					<image src="/static/icon/mine/nav.png" class="n-img"/>
					<text> 导航 </text>
				</view>
			</view>
			<!-- 底部按钮 -->
			<view class="btn-box"> 
				<view class="btn" @tap="goEva('item.id')"> 评价用户 </view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	const props = defineProps([ 'list' ])
	const goOrderDetails = () => {
		uni.navigateTo({
			url: '/pages/riderPages/riderOrderDetails/riderOrderDetails'
		})
	}
	const goEva = (id) => {
		uni.navigateTo({
			url: `/pages/riderPages/evaUser/evaUser?order_id=${id}`
		})
	}
</script>

<style lang="scss" scoped>
	.order-item {
		width: 100%;
		padding: 10px 12px;
		padding-bottom: 15px;
		border-radius: 10px;
		background-color: #fff;
		box-sizing: border-box;
		.top {
			padding-bottom: 10px;
			border-bottom: 1px solid #eeeeee;
			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.time {
					color: #333333;
					font-size: 14px;
					font-weight: 500;
					line-height: 20px;
					text {
						color: #FF9F00;
					}
				}
				.price {
					color: #333333;
					font-size: 12px;
					font-weight: 700;
					line-height: 17px;
					text {
						font-size: 18px;
					}
				}
			}
			.desc {
				margin-top: 10px;
				color: #FF3B1E;
				font-size: 14px;
				font-weight: 400;
				line-height: 14px;
			}
		}
		.content {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10px 0;
			.distance {
				text-align: center;
				.km, .m {
					.km-item, .m-item {
						color: #333333;
						font-size: 12px;
						font-weight: 400;
						line-height: 12px;
					}
				}
				.m {
					position: relative;
					margin-top: 36px;
					&::before {
						position: absolute;
						top: -30px;
						left: 50%;
						display: block;
						content: '';
						width: 1px;
						height: 24px;
						background-color: #d8d8d8;
					}
				}
			}
			.shop-user-nav {
				flex: 1;
				margin: 0 14px;
				.shop-info, .user-info {
					.shop-name, .user-name {
						color: #222222;
						font-size: 16px;
						font-weight: 500;
						line-height: 20px;
					}
					.address {
						color: #999999;
						font-size: 14px;
						margin-top: 4px;
						font-weight: 400;
						line-height: 20px;
					}
				}
				.user-info {
					margin-top: 14px;
				}
			}
			.nav {
				display: flex;
				flex-direction: column;
				align-items: center;
				.n-img {
					width: 34px;
					height: 34px;
				}
				text {
					color: #999999;
					font-size: 12px;
					margin-top: 3px;
					font-weight: 400;
					line-height: 20px;
				}
			}
		}
		.btn-box {
			display: flex;
			justify-content: end;
			.btn {
				width: 100px;
				height: 40px;
				color: #ffffff;
				line-height: 40px;
				margin-left: 8px;
				text-align: center;
				background: #FF3B1E;
				border-radius: 106px;
			}
		}
	}
</style>